<template>
    <div>
        <van-nav-bar title="预览" left-arrow @click-left="onClickLeft" :fixed="true" />
        <div style="padding-top:60px;background: #fff;">
            <div class="center bold">共{{ numPages || 0 }}页</div>
            <!-- <div v-for="i in numPages" :key="i">
                <div class="center">{{ i + '/' + numPages }}</div>
                <pdf :src="src" :page="i" @progress="pdfload($event)"> </pdf>
            </div> -->
            <p class="arrow">
                <span @click="changePdfPage(0)" class="turn" :class="{ grey: currentPage == 1 }">上一页</span>
                {{ currentPage }} / {{ pageCount }}
                <span @click="changePdfPage(1)" class="turn" :class="{ grey: currentPage == pageCount }">下一页</span>
            </p>
            <pdf :src="src" :page="currentPage" @num-pages="pageCount = $event" @page-loaded="currentPage = $event"
                @loaded="loadPdfHandler">
            </pdf>
        </div>


    </div>


</template>

<script>
import pdf from 'vue-pdf'
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
export default {
    components: {
        pdf
    },
    data() {
        return {
            src: "",
            numPages: undefined,
            currentPage: 0, // pdf文件页码
            pageCount: 0, // pdf文件总页数
        }
    },
    mounted() {
        this.getNumPage('https://file.huidiaoyan.com/mj/2022-9/786f43a3c44a3c482ac87fac9c31732f.pdf')
    },
    methods: {
        getNumPage(e) {
            this.src = pdf.createLoadingTask({ url: e, CMapReaderFactory })
            this.src.promise.then(pdf => {
                this.numPages = pdf.numPages;
            });
        },
        onClickLeft() {
            this.$router.go(-1)
        },
        pdfload(e) {
            console.log(e)
        },
        // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
        changePdfPage(val) {
            // console.log(val)
            if (val === 0 && this.currentPage > 1) {
                this.currentPage--
            }
            if (val === 1 && this.currentPage < this.pageCount) {
                this.currentPage++
            }
        },

        // pdf加载时
        loadPdfHandler(e) {
            this.currentPage = 1 // 加载的时候先加载第一页
        }
    }

}
</script>

<style>
.center {
    text-align: center;
}

.bold {
    font-weight: bold;
}
.arrow{
    text-align: center;
    margin-top: 10px;

}
</style>